<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,user-scaleable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		
		<script type="text/javascript" src="js/reset_font.js"></script>
		<title></title>
		<style>
			html,body{padding: 0;margin: 0;font-size: 0.375rem;}
			.top{
				position:fixed;
				width:100%;height: 1rem;line-height: 1rem;
				background: white;
				border-bottom: 1px solid red;
				color:#555555;
				text-align: center;
			}
			.bot{
				position: fixed;
				width: 100%;
				height: 4rem;
				bottom: 0;
				background: white;
				border-top: 1px solid #666666;
				box-sizing: border-box;
				background: #F5F5F5;
			}
			.bot1{
				z-index: 99;
				position: fixed;
				width:100%;height: 1.75rem;
				bottom:2.25rem;
			   border-bottom: 1px solid #999999;
				background: rgba(255,255,255,0.8);
				box-sizing: border-box;
			}
			.bot2{
				z-index: 99;
				position: fixed;
				width:100%;height: 1.7rem;
				bottom: 0;
				border-top: 1px solid #999999;
				background: rgba(255,255,255,0.8);
				box-sizing: border-box;
			}
			.list{
				/*position: fixed;*/
				position: relative;
				z-index: 1;
				width:100%;height: 2.5rem;
				/*border:1px solid yellow;*/
				margin-top: 0.8rem;background: white;
				/*padding-top:0.5rem;*/
				
			}
			ul{
			 overflow: auto;
			 padding:0;
			}
			ul li{
				margin: 0;
				list-style: none;
				text-align: center;
				font-size: 0.35rem;
				line-height: 0.5rem;
			}
			.options{
				/*border:1px solid red;*/
				padding: 0;
				/*position: relative;*/
				margin-top: 0;
			}
			.options li{
				float:left;
				margin: 0;
				width:33%;
				text-align: center;
				height: 0.5rem;
				
				
			}
			.provice{
				float:left;
				width:33%;
				height: 2.5rem;
				/*overflow: hidden;*/
			}
			.provice ul{
				height: 100%;
				overflow:scroll;
				/*overflow-y: hidden;*/ 
			}
			.city{
				float:left;
				width:33%;
				height: 2.5rem;
				
			}
			.city ul{
				height: 100%;
				overflow:scroll;
			}
		</style>
	</head>
	<body>
		<div class="top">
		    cake优选
		</div>
		<div class="bot">
			<div class="list">
				<div class="provice">
					<ul >
						<li>江苏省</li>
						<li>浙江省</li>
						<li>安徽省</li>
						<li>湖南省</li>
						<li>湖北省</li>
						<li>福建省</li>
						<li>江苏省</li>
						<li>浙江省</li>
						<li>安徽省</li>
						<li>湖南省</li>
						<li>湖北省</li>
						<li>福建省</li>
					</ul>
				</div>
				<div class="city">
					<ul >
						<li>南京市</li>
						<li>徐州市</li>
						<li>连云港市</li>
						<li>苏州市</li>
						<li>无锡市</li>
						<li>AAA市</li>
						<li>BBB市</li>
						<li>AAA市</li>
						<li>BBB市</li>
						
					</ul>
				</div>
			</div>
			<div class="bot1">
				<ul class="options">
					<li>选择省</li>
					<li>选择市</li>
					<li>选择区</li>
				</ul>
			</div>
			<div class="bot2"></div>
		</div>
	</body>
</html>
